<template>
  <view class="page-login">
    <image class="l-img" :src="'background-image/login.png' | prefixOssUrl" />
    <view class="l-form box-gap">
      <image class="f-img" :src="'background-image/login-form.png' | prefixOssUrl" alt="" />
      <view class="f-item">
        <a-input placeholder="请输入电话号码" clearable trim v-model="form.username">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe614;</icon>
          </template>
        </a-input>
      </view>
      <view class="f-item">
        <a-input placeholder="请输入登录密码" password :isPasswdShow="isPasswdShow" clearable trim v-model="form.passwd">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe602;</icon>
          </template>
          <template v-slot:suffix>
            <icon v-if="form.passwd" class="iconfont eye" @tap="isPasswdShow = !isPasswdShow">
              {{ isPasswdShow ? '&#xe6ba;' : '&#xe616;' }}
            </icon>
          </template>
        </a-input>
      </view>
      <view class="sub-btns">
        <view class="forgot-password" @tap.prevent="nav('/pages/reset-pwd/index')">忘记密码？</view>
      </view>
      <view class="login-btn" :class="{ 'login-btn_active': canLogin }" @tap="handleLogin">登录</view>
    </view>
    <van-popup class="l-popup" :show="isPopupShow" round @click-overlay="isPopupShow = false">
      <view class="p-header">选择登录方式</view>
      <view class="p-main">
        <view class="m-item" :class="{ 'm-other': item.type === 2 }" v-for="(item, i) in authorizeMemberList" :key="i"
          @tap="handSelectLogin(item.token)">
          <image class="i-left" :src="`${item.type === 1 ? 'login/icon/mine.png' : 'login/icon/other.png'}`
          | prefixOssUrl" />
          <view class="i-right">
            <view class="r-label">{{ item.type === 1 ? '当前账号' : '店主账号' }}</view>
            <view class="r-value">
              <text class="v-name">{{ $_.get(item, 'nickname') }}</text>
              {{ $_.get(item, 'username') }}
            </view>
          </view>
        </view>
      </view>
    </van-popup>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
  import {
    mapActions
  } from 'vuex';

  import {
    localStorage
  } from '@/utils/localStorage';
  import {
    model
  } from '@/model';
  const {
    Member
  } = model.collection;

  export default {
    onLoad(params) {
      this.certificate = !!params.certificate
    },
    data() {
      return {
        form: {
          username: '',
          passwd: ''
        },
        isPopupShow: false,
        isPasswdShow: true,
        authorizeMemberList: []
      }
    },
    computed: {
      canLogin() {
        return this.form.username !== '' && this.form.passwd !== ''
      }
    },
    methods: {
      ...mapActions('user', ['getUserInfo']),
      handleLogin() {
        if (!this.form.username) return this.toast('账号不能为空')
        if (!this.form.passwd) return this.toast('密码不能为空')
        Member.sendApi('accountLogin', {
          params: this.form,
          data: {}
        }).then((res) => {
          const {
            status,
            data
          } = res
          if (status) {
            if (!data.length) {
              this.toast('该账户不是店主，无法登录');
              return;
            }
            this.authorizeMemberList = data
            if (data.length === 1 && data[0].type === 1) {
              localStorage.setToken(data[0].token);
              this.getUserInfo();
              this.certificate ? this.swi('/pages/mine/index') : this.back();
            } else {
              this.isPopupShow = true;
            }
          }
        })
      },
      handSelectLogin(token) {
        localStorage.setToken(token);
        this.getUserInfo();
        this.isPopupShow = false;
        this.certificate ? this.swi('/pages/mine/index') : this.back();
      }
    },
    created() {
      this.form.username = '';
      this.form.passwd = '';
      this.authorizeMemberList = [];
    }
  };
</script>

<style lang="less">
  .page-login {
    position: relative;
    .flexLayout(@dir: column, @j: flex-end);
    width: 100%;
    height: 100vh;

    .l-img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .l-form {
      position: relative;
      .flexLayout(@dir: column, @j: center);
      box-sizing: border-box;
      width: 680rpx;
      height: 78vh;
      margin: 0 auto;
      border-radius: 5rpx;

      .f-img {
        position: absolute;
        left: 0rpx;
        top: 0rpx;
        width: 100%;
        height: 100%;
      }

      .f-item {
        margin: 30rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #EBEBEB;
        z-index: 99;


        .icon-prefix {
          width: 60rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          color: #999;
        }

        .axq-input {
          width: 620rpx;
        }

        .eye {
          margin-right: 15rpx;
          width: 50rpx;
          height: 50rpx;
          line-height: 72rpx;
          z-index: 99999;
          color: #db187c;
          font-size: 53rpx;
          z-index: 99;
        }
      }

      .sub-btns {
        .flexLayout(@j: flex-end);
        z-index: 99;

        .forgot-password {
          margin-top: 5rpx;
          width: 200rpx;
          height: 70rpx;
          line-height: 70rpx;
          text-align: right;
          font-size: 30rpx;
          color: #db187c;
        }
      }

      .login-btn {
        z-index: 99;
        height: 86rpx;
        margin-top: 40rpx;
        border-radius: 10rpx;
        text-align: center;
        line-height: 86rpx;
        background-color: #EDEDED;
        color: #fff;

        &_active {
          background: #db187c;
        }
      }
    }

    .l-popup {
      .p-header {
        width: 600rpx;
        height: 90rpx;
        font-size: 34rpx;
        font-weight: 500;
        text-align: center;
        line-height: 90rpx;
        border-bottom: 1rpx solid #E5E5E5;
      }

      .p-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 600rpx;
        height: 450rpx;
        padding-bottom: 30rpx;
        overflow-y: auto;

        .m-item {
          display: flex;
          align-items: center;
          width: 510rpx;
          height: 98rpx;
          padding: 15rpx;
          margin-top: 20rpx;
          box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
          border-radius: 5rpx;

          .i-left {
            width: 90rpx;
            height: 90rpx;
          }

          .i-right {
            width: 400rpx;
            height: 90rpx;
            margin-left: 20rpx;
            font-size: 30rpx;
            font-weight: 500;

            .r-label {}

            .r-value {
              margin-top: 10rpx;

              .v-name {
                margin-right: 20rpx;
              }
            }
          }
        }

        .m-other {
          color: #999;
        }
      }
    }
  }
</style>